<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时钟</title>
		<style type="text/css">
			.clock {
				position: relative;
				width: 340px;
				height: 340px;
				margin: 0 auto;
				border-radius: 50%;
				border: 5px solid #ffff00;
			}

			.clock>div {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}

			.hour-hand-wrapper {
				width: 50%;
				height: 50%;
				animation: run 43200s linear infinite;
			}

			.hour-hand {
				width: 6px;
				height: 50%;
				margin: 0 auto;
				background-color: #ffcdbd;
			}

			.minute-hand-wrapper {
				width: 75%;
				height: 75%;
				animation: run 3600s steps(60) infinite;
			}

			.minute-hand {
				width: 4px;
				height: 50%;
				margin: 0 auto;
				background-color: #cfffc9;
			}

			.second-hand-wrapper {
				width: 100%;
				height: 100%;
				animation: run 60s steps(60) infinite;
			}

			.second-hand {
				width: 2px;
				height: 50%;
				margin: 0 auto;
				background-color: #c2f5ff;
			}
			
			.cover{
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background-color: #000;
			}

			@keyframes run {
				from {
					transform: rotateZ(0);
				}

				to {
					transform: rotateZ(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="clock">
			<div class="hour-hand-wrapper">
				<div class="hour-hand"></div>
			</div>
			<div class="minute-hand-wrapper">
				<div class="minute-hand"></div>
			</div>
			<div class="second-hand-wrapper">
				<div class="second-hand"></div>
			</div>
			<div class="cover"></div>
		</div>
	</body>
</html>
